<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>


<body>

    <div id="app">
        <button @click="type=!type">切换</button>
        <transition @before-enter="beforeEnter" name="hd">
            <h1 v-if="type">后段军</h1>
        </transition>
    </div>


<script>


    var app=new Vue({
        el:'#app',
        data:{
            type:true,
        }
    });

</script>
<style type="text/css">
    .hd-enter-active{
        animation: show-in 1s;
    }
    .hd-leave-active{
        animation: show-out 1s;
    }
  @keyframes show-in {

      0%{
          transform: translate(100px,0);
      }
      100%{
          transform: translate(0,0);
      }
  }

    @keyframes show-out {

        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(0,100px);
        }
    }

</style>
</body>
</html>